<template>
  <el-form :model="state.form" label-width="120px">
    <el-form-item label="产品名">
      <el-input v-model="state.form.name" />
    </el-form-item>
     <el-form-item label="分类">
       <el-select v-model="state.form.cate_id" placeholder="产品分类" size="large" @change="onhandleChange">
        <el-option  v-for="item in state.category"
         :label="item.name"
         :value="item.id"
         :key="item.id" />
      </el-select>
    </el-form-item>
       <el-form-item label="库存">
        <el-input v-model="state.form.store" style="width:180px" />
      </el-form-item>
     <el-form-item label="价格">
      <el-input v-model="state.form.price" style="width:180px" />
    </el-form-item>
	<el-form-item label="标签">
	      <el-input v-model="state.form.tip"  style="width:180px" />
	    </el-form-item>
      <el-form-item label="规格">
            <el-radio-group v-model="state.form.spec_type" class="ml-4">
              <el-radio :label="0">单规格</el-radio>
              <el-radio :label="1">多规格</el-radio>
            </el-radio-group>
    </el-form-item>
      <el-form-item  v-if="state.form.spec_type == 1">
        <div>
          <div v-for="(item,key) in state.attr" :key="key">
              <div>
                <el-button>{{item.name}}</el-button>:
                <el-tag  v-for="(val,vkey) in item.value" :key="val"  class="mx-1" closable  @close="delAttr(key,vkey)" >{{val}}</el-tag>
              </div>
              <el-row>
                <el-col :span="6">
                  <span>添加规格值</span>
                  </el-col>
                <el-col :span="10">
                  <el-input v-model="attr_value[key]" />
                  </el-col>
                <el-col :span="4">
                  <el-button @click="putAttrValue(key)" >确定</el-button>
                </el-col>
              </el-row>
          </div>
          <el-divider />
          <div v-if="state.showSkuInput">
            <el-row>
            <el-col :span="6">
              <span>添加规格</span>
            </el-col>
            <el-col :span="10">
               <el-input v-model="attr_name" />
            </el-col>
            <el-col :span="2">
               <el-button @click="putAttrName">确定</el-button>
            </el-col>
          </el-row>
         
           </div>
          <el-row>
            <el-button @click="state.showSkuInput = true" type="primary">添加规格</el-button>
            <el-button @click="handleMakeSku" type="success">生成规格</el-button>
          </el-row>
        </div>
          <Sku ref="skulist" :skus="state.skus" />
      </el-form-item>
      <el-form-item label="主图片" v-if="state.loaded == true">
        <ImageUpload    ref="editImage"  :imageUrl="state.form.image"  />
      </el-form-item>
       <el-form-item label="商品轮播图" v-if="state.loaded == true " >
        <ImageList   ref="imglist" :images.sync="state.form.images"/>
       </el-form-item>
     <el-form-item label="简介">
      <el-input type="textarea" v-model="state.form.desc" />
    </el-form-item>
     <el-form-item label="内容">
          <WangEditer :htmlStr="state.form.content"  @update:htmlStr="updateEditor"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">更新</el-button>
    </el-form-item>
  </el-form>
 
</template>
<script setup>
import { ref,reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {updateProduct,getInfo,createSku} from '@/api/product.js';
import {getCategoryIndex} from '@/api/category.js';
import ImageUpload from '@/components/ImageUpload.vue';
import ImageList from '@/components/ImageList.vue';
import WangEditer from '@/components/WangEditer.vue';
import Sku from '@/components/Sku.vue';

const route = useRoute();

const editImage = ref(null);
const imglist = ref(null);
const skulist = ref(null);
const state = reactive({
	form:{},
  category:[],
  secCategroy:[],
  skus:[],
  attr:[],
  showSkuInput:true,
  loaded:false
});
const attr_name = ref(null);
const attr_value = ref([]);
const sku = reactive({
  name:'',
  value:''
});

const onSubmit = ()=>{
  state.form.images = imglist.value.imageLists;
  if(state.form.spec_type == 1) {
	    state.form.skus   = skulist.value.skuLists;
  } else {
	   state.form.skus  = [];
  }

  state.form.attr   = state.attr;
  state.form.image  = editImage.value.image;
  updateProduct(state.form).then(res=>{
		if(res.code == 200) {
			ElMessage({
				message:"更新成功",
				type:"success"
			});
		}
  })
}

onMounted(()=>{
  // 获取到分类跟产品信息得数据
  var id = route.query.id;
  getInfo({id:id}).then(res=>{
	state.form = res.data;
    state.attr      = res.data.attr;
    state.skus      = res.data.spec_list;
    //获取二级分类
    state.category.map((item)=>{
      if(item.id == state.form.fcate_id) {
        state.secCategroy = item.children;
      }
    })
	  state.loaded = true;
  })

  getCategoryIndex().then(res=>{
    if(res.code == 200) {
      state.category = res.data;
    }
  })
})
const updateEditor =(content)=>{
  state.form.content = content;
}
const putAttrName = ()=>{
  state.attr.push({
    name:attr_name.value,
    value:[]
  });
  state.showSkuInput = false;
}
const putAttrValue = (key)=>{
  let obj = {
    name : attr_value.value[key]
  };
  state.attr[key].value.push(obj)
}
const delAttr = (key,vkey)=>{
  state.attr[key].value.splice(vkey,1)
}
const handleMakeSku = ()=>{
  state.showSkuInput = false;
  createSku({skus:state.attr}).then(res=>{
    if(res.code == 200) {
      state.skus = res.data;
    }
  })
}


const onhandleChange = (val) =>{

  state.category.map((item)=>{
    if(item.id == val) {
      state.form.cate_name = item.name;
      state.secCategroy = item.children;
    }
  })
}

const onHandleScateChange = (val) =>{
  state.secCategroy.map((item)=>{
    if(item.id == val) {
      state.form.cate_name = item.name;
    }
  })
}
</script>



<style scoped>
.read-the-docs {
  color: #888;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
